<h1 class="title-h1">售后说明</h1>
<div class="layui-card-body">
    <form class="layui-form " action="" lay-filter="dataForm">



        <div class="layui-form-item">
            <div class="layui-input-block">
                <div id="aftersaleDiv"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="dataSubmit">保存</button>
            </div>
        </div>

    </form>
</div>
<style>
    .layui-input-block{
        margin-right: 100px;
    }
    .layui-table td{
    padding:20px;
    height: 80px;
}
.c-textarea{
    z-index: 1;
    padding: 14px;
}
.layui-icon-close{
z-index: 1;
right:-50px;
top: 45px;
}
</style>
<script id="tableTpl" type="text/html">
    <table class="layui-table">
        <thead>
            <tr>
                <th>标题</th>
                <th>内容</th>
            </tr>
        </thead>
        <tbody>
            {{#  layui.each(d, function(index, item){ }}
            <tr>
                <td><input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="title" name="aftersale[{{index}}][title]" value="{{ item.title || '' }}"/></td>
                <td> 
                    <textarea type="text" class="layui-input layui-table-edit c-textarea" data-index="{{index}}" data-item="content" name="aftersale[{{index}}][content]"  >{{ item.content || '' }}</textarea>
                    <i class="layui-icon layui-table-tips-c layui-icon-close"></i>
                </td>
            </tr>
            {{#  }); }}
            {{#  if(d.length === 0){ }}
            <tr><td colspan="6">暂无售后说明</td></tr>
            {{#  } }}
        </tbody>
    </table>
    <button type="button" class="layui-btn addAfterSale">添加售后说明</button>
</script>
<script>
    layui.use(['form', 'http', 'laydate', 'laytpl'], function () {
        var form = layui.form;
        var http = layui.http;
        var $ = layui.$;
        var laytpl = layui.laytpl;
        var aftersale = <?php echo json_encode($info?$info:[]);?>;
        var getTpl = tableTpl.innerHTML,
            view = document.getElementById('aftersaleDiv');
        laytpl(getTpl).render(aftersale, function (html) {
            view.innerHTML = html;
        });

        $("body").on('click', '.layui-table .layui-icon-close', function (e) {
            var index = $(".layui-table .layui-icon-close").index($(this))
            aftersale.splice(index, 1)
            console.log('删除后', aftersale)
            laytpl(getTpl).render(aftersale, function (html) {
                view.innerHTML = html;
            });
        })
        $("body").on('click', '.addAfterSale', function () {
            aftersale.push({})
            console.log('添加后', aftersale)
            laytpl(getTpl).render(aftersale, function (html) {
                view.innerHTML = html;
            });
        })
        $("body").on('blur', '.layui-table-edit', function () {
            var index = $(this).data('index')
            var item = $(this).data('item')
            aftersale[index][item] = $(this).val()
            console.log(aftersale)
        })
        //监听提交
        form.on('submit(dataSubmit)', function (data) {
            http.post('/product/aftersale', data.field, function (res) {
            }, $(this), true)
            return false;
        })
    })
</script>